<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
    <title>个人中心</title>
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" type="text/css" href="css/popup.css" />
    <script src="js/config.js"></script>
    <script src="js/jquery-1.8.1.min.js"></script>
    <script src="https://unpkg.zhimg.com/axios/dist/axios.min.js"></script>
    <script src="js/axios-config.js?v=4"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="js/component.js?v=10"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>

<body>
    <div id="app" v-cloak>
        <template v-if="userInfo">
            <div class="wode-top">
                <div class="wode-yhxx d-f j-c-s">
                    <div class="yhxx-left d-f a-c-c">
                        <img :src="userInfo.avatar_url?userInfo.avatar_url:'img/index/touxiang.png'"
                            class="yhxx-toux" />
                        <div class="yhxx-xq">
                            <p class="yhxx-xq-name">{{userInfo.nick_name}}</p>
                            <p class="yhxx-xq-id">ID:{{userInfo.id + 10000}}</p>
                            <p class="yhxx-xq-daka">打卡{{extra.signCountTotal}}天</p>
                        </div>
                    </div>
                    <div class="yhxx-right">
                        <!-- <div class="yhxx-xiaoxi">
                            <img src="img/wode/icon_my_youjian.png" class="youjian-icon" />
                            <span class="xiaoxi-tag">&nbsp;</span>
                        </div> -->
                        <div class="jifen d-f a-c-c">
                            <img src="img/wode/icon_my_jifen.png" class="jifen-icon" />
                            <span class="jifen-text">0积分</span>
                        </div>
                    </div>
                </div>
                <div class="wode-kthy d-f a-c-c j-c-s">
                    <img src="img/wode/vip-icon_03.png" class="vip-icon" />
                    <template v-if="userInfo.vip">
                        <b class="vip-jstit flex1">有效期至 {{ userInfo.vip.expire }}</b>
                        <a href="/VIP.html" class="vip-ljkt">立即续费</a>
                    </template>
                    <template v-else>
                        <b class="vip-jstit flex1">VIP介绍</b>
                        <a href="/VIP.html" class="vip-ljkt">立即开通</a>
                    </template>
                </div>
            </div>
            <div class="wode-nav">
                <div class="wode-cell-list d-f a-c-c j-c-s" @click="goTo('/qiandao.html')">
                    <img src="img/wode/icon_my_qiandao.png" class="wode-list-icon" />
                    <span class="wode-list-body flex1">本月已签到<span
                            style="color:#09C98E;">{{extra.signCountMonth}}天</span></span>
                    <span class="wode-list-extra">
                        <a href="javascript:;" class="qiandao-btn" :style="extra.isSign?'background:silver':''"
                            @click="sign">{{extra.isSign?'已':''}}签到</a>
                    </span>
                </div>
                <div class="wode-cell-list d-f a-c-c j-c-s" @click="goTo('/wodekongjian.html')">
                    <img src="img/wode/icon-my_kecheng.png" class="wode-list-icon" />
                    <span class="wode-list-body flex1">我的空间</span>
                    <span class="wode-list-extra">
                        <img src="img/shipinxuexi/xueyingyu_06.png" class="right-icon" />
                    </span>
                </div>
                <div class="wode-cell-list d-f a-c-c j-c-s" @click="goTo('kexishezhi.html')">
                    <img src="img/wode/icon_my_shezhi.png" class="wode-list-icon" />
                    <span class="wode-list-body flex1">科系设置</span>
                    <span class="wode-list-extra">
                        <img src="img/shipinxuexi/xueyingyu_06.png" class="right-icon" />
                    </span>
                </div>
                <div class="wode-cell-list d-f a-c-c j-c-s" @click="goTo('xuexitixing.html')">
                    <img src="img/wode/icon_my_tixing.png" class="wode-list-icon" />
                    <span class="wode-list-body flex1">学习提醒</span>
                    <span class="wode-list-extra">
                        <img src="img/shipinxuexi/xueyingyu_06.png" class="right-icon" />
                    </span>
                    </span>
                </div>
                <div class="wode-cell-list d-f a-c-c j-c-s" @click="goTo('wodegoumai.html')">
                    <img src="img/wode/icon_my_jifen.png" class="wode-list-icon" />
                    <span class="wode-list-body flex1">购买记录</span>
                    <span class="wode-list-extra">
                        <img src="img/shipinxuexi/xueyingyu_06.png" class="right-icon" />
                    </span>
                    </span>
                </div>
                <div class="wode-cell-list d-f a-c-c j-c-s" v-if="false">
                    <img src="img/wode/icon_my_liiwu.png" class="wode-list-icon" />
                    <span class="wode-list-body flex1">邀请有礼</span>
                    <span class="wode-list-extra">
                        最高100元奖金
                    </span>
                </div>
                <div class="wode-cell-list d-f a-c-c j-c-s" v-if="false">
                    <img src="img/wode/icon_my_shouc.png" class="wode-list-icon" />
                    <span class="wode-list-body flex1">收藏</span>
                    <span class="wode-list-extra">
                        <img src="img/shipinxuexi/xueyingyu_06.png" class="right-icon" />
                    </span>
                </div>
                <div class="wode-cell-list d-f a-c-c j-c-s" v-if="false">
                    <img src="img/wode/icon_my_duihuan.png" class="wode-list-icon" />
                    <span class="wode-list-body flex1">兑换码</span>
                    <span class="wode-list-extra">
                        <img src="img/shipinxuexi/xueyingyu_06.png" class="right-icon" />
                    </span>
                </div>
                <div class="wode-cell-list d-f a-c-c j-c-s" v-if="false">
                    <img src="img/wode/icon_my_wechat.png" class="wode-list-icon" />
                    <span class="wode-list-body flex1">加入微信群</span>
                    <span class="wode-list-extra">
                        <img src="img/shipinxuexi/xueyingyu_06.png" class="right-icon" />
                    </span>
                </div>
            </div>
        </template>
        <footbox active="wode"></footbox>
    </div>
</body>

<script>
    var app = new Vue({
        el: '#app',
        data() {
            return {
                userInfo: null,
                extra: {}
            }
        },
        created() {
            this.getUser()
            this.getExtra()
        },
        mounted() {
        },
        methods: {
            sign() {
                if (this.extra.isSign) {
                    return
                }
                axios.get('/mp/wechatUser/sign').then(res => {
                    // console.log('nvkfnj' + res);
                    if (res.status == 200) {
                        this.extra.isSign = 1
                        this.extra.signCountTotal++
                        this.extra.signCountMonth++
                    }

                });

            },
            getUser() {
                axios.get("/mp/wechatUser/getUserInfo").then(res => {
                    this.userInfo = res.data;
                });
            },
            getExtra() {
                axios.get('/mp/wechatUser/getExtra').then(res => {
                    this.extra = res.data;
                });
            },
            remindStudy() {
                axios.get('/mp/wechatUser/remindStudy').then(res => {
                    if (res.status == 200) {
                        this.userInfo.remind_study = res.data.remind_study;
                    }
                });
            },

            goTo(url) {
                window.location.href = url;
            },
        }
    })

</script>

</html>